<template>
	<!-- <view class="content">
        <image class="logo" src="../../static/logo.png"></image>
		<view>
            <text class="title">{{title}}</text>
        </view>
	</view> -->
	<view class="container">
		<uni-nav-bar left-icon="back" left-text="返回" right-text="菜单" title="导航栏组件"></uni-nav-bar>
		<view class="uni-product-list">
			<view class="uni-product" v-for="(product,index) in productList" :key="index">
				<view class="image-view">
					<image v-if="renderImage" class="uni-product-image" :src="product.image"></image>
				</view>
				<view class="uni-product-title">{{product.title}}</view>
				<view class="uni-product-price">
					<text class="uni-product-price-favour">￥{{product.originalPrice}}</text>
					<text class="uni-product-price-original">￥{{product.favourPrice}}</text>
					<text class="uni-product-tip">{{product.tip}}</text>
				</view>
			</view>
		</view>
		
		<uni-badge text="12" type="purple"></uni-badge>
		<uni-countdown font-color="#FFFFFF" bgr-color="#000000" timer="2019-12-29 12:00:00"></uni-countdown>
	</view>

</template>

<script>
	import uniBadge from '@/components/uni-badge.vue';
	import uniCountdown from "@/components/uni-countdown.vue";
	import uniNavBar from "@/components/uni-nav-bar.vue"
	export default {
		components: {uniBadge,uniCountdown,uniNavBar},
		data() {
			return {
				title: 'Hello 1',
				productList:[{
					image:'https://static.fotor.com.cn/assets/projects/pages/f4e51810-0ca2-11e8-ad5c-43f42c122101_9728690e-609a-404d-a596-98882463ddcb_thumb.jpg',
					title:'多芬沐浴露',
					originalPrice:2.12,
					favourPrice:1.33,
					tip:'促销',
				},{
					image:'https://static.fotor.com.cn/assets/projects/pages/f4e51810-0ca2-11e8-ad5c-43f42c122101_9728690e-609a-404d-a596-98882463ddcb_thumb.jpg',
					title:'多芬沐浴露2',
					originalPrice:2.12,
					favourPrice:1.33,
					tip:'促销',
				}
				],
				renderImage:true
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.container{
		background-color: #eee;
		.uni-product-list{
		}
	}
</style>
